<template>
  <view class="table-card">
    <!-- 标题 + 筛选 -->
    <view class="table-header">
      <view class="table-title">数据列表</view>
      <view class="filter-group">
        <text class="filter-label">人员：</text>
        <picker
          mode="selector"
          :range="personOptions"
          :value="selectedPersonIndex"
          @change="onFilterChange"
          class="filter-picker"
        >
          <view class="picker-display">
            {{ personOptions[selectedPersonIndex] }}
          </view>
        </picker>
      </view>
    </view>

    <!-- 表格主体 -->
    <view class="table-wrapper">
      <table class="data-table">
        <thead>
          <tr>
            <th>序号</th><th>项目经理名称</th><th>区县公司</th>
            <th>项目名称</th><th>站点名称</th><th>造价（元）</th><th>是否验收</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="paginatedData.length === 0">
            <td colspan="7" class="empty-row">暂无数据</td>
          </tr>
          <tr
            v-for="(item, idx) in paginatedData"
            :key="item.id || idx"
            class="data-row"
          >
            <td>{{ (currentPage-1)*pageSize + idx + 1 }}</td>
            <td>{{ item.manager }}</td>
            <td>{{ item.company }}</td>
            <td>{{ item.projectName }}</td>
            <td>{{ item.siteName }}</td>
            <td>{{ item.cost }}</td>
            <td>{{ item.isacc === 'false' ? '否' : '是' }}</td>
          </tr>
        </tbody>
      </table>
    </view>

    <!-- 分页 -->
    <view class="pagination">
      <button :disabled="currentPage===1" @click="setPage(currentPage-1)">上一页</button>
      <text>第 {{ currentPage }} / {{ totalPages }} 页</text>
      <button :disabled="currentPage===totalPages" @click="setPage(currentPage+1)">下一页</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";

const token = uni.getStorageSync('userInfo').token;

// 从父组件接收 personOptions
const props = defineProps({
  personOptions: {
    type: Array,
    default: () => ["全部"]
  }
});

// 数据列表
const dataList = ref([]);

// 本地维护分页、筛选状态
const selectedPersonIndex = ref(0);
const filterPerson = computed(() =>
  selectedPersonIndex.value === 0
    ? ""
    : props.personOptions[selectedPersonIndex.value]
);

const currentPage = ref(1);
const pageSize = ref(10);

const fetchData = (person = "") => {
  uni.request({
    url: "./api/projectsbym",
    method: "GET",
    header: {
      "Authorization": `Bearer ${token}`
    },
    data: { person },
    success: (res) => {
      dataList.value = Array.isArray(res.data) ? res.data : [];
      uni.$emit("updateManagerUploadData", dataList.value);
    },
    fail: () => {
      dataList.value = [];
      uni.$emit("updateManagerUploadData", []);
    },
  });
};

// 计算分页
const filteredData = computed(() =>
  filterPerson.value
    ? dataList.value.filter((i) => i.manager === filterPerson.value.split('-')[1])
    : dataList.value.slice()
);
const totalPages = computed(() =>
  Math.max(1, Math.ceil(filteredData.value.length / pageSize.value))
);
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return filteredData.value.slice(start, start + pageSize.value);
});

// 分页方法
const setPage = (p) => {
  if (p < 1 || p > totalPages.value) return;
  currentPage.value = p;
};

// // 行点击
// const handleRowClick = (item) => {
//   uni.$emit("fetchSiblingData", {
//     misId: item.misCode,
//     taskId: item.subtaskId,
//   });
// };

const onFilterChange = (event) => {
  selectedPersonIndex.value = event.detail.value;
  currentPage.value = 1;
  const selectedPerson = filterPerson.value;
  fetchData(selectedPerson);
};

// 初始加载
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.table-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 16px;
  height: 100%;
  box-sizing: border-box;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 8px;
}

.table-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333333;
}

.filter-group {
  display: flex;
  align-items: center;
}

.filter-label {
  margin-right: 8px;
  font-size: 0.95rem;
  color: #555555;
}

.filter-picker {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.95rem;
  width: 120px;
  text-align: center;
}

.picker-display {
  line-height: 32px;
}

.table-wrapper {
  flex: 1;
  overflow-y: auto;
  margin-top: 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.data-table thead th {
  background-color: #f5f7fa;
  color: #333333;
  font-weight: 600;
  padding: 12px 8px;
  border-bottom: 2px solid #e0e0e0;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1;
  cursor: pointer;
}

.data-table tbody td {
  padding: 12px 8px;
  border-bottom: 1px solid #eaeaea;
  text-align: center;
}

.empty-row {
  text-align: center;
  color: #999999;
  padding: 20px 0;
}

.data-row:nth-child(odd) {
  background-color: #fafafa;
}
.data-row:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.page-btn {
  background-color: #409eff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.95rem;
  margin: 0 8px;
}

.page-btn:disabled {
  background-color: #a0cfff;
  color: #ffffff;
}

.page-info {
  font-size: 0.95rem;
  color: #555555;
}
</style>
